<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<view style="margin: 50rpx 20rpx;">
			<text class="header">合作商营业信息</text>
		</view>
		<view class="card" style="padding: 10px 20px 10px 10px;">
			<view class="item_top">
				<view class="item_top_left">
					营业状态
				</view>
				<view class="item_top_right" style="display: flex;justify-content: center;" @click="getId">
					<view>
						{{radiovalue1}}
					</view>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
		</view>

		<view class="item_top" style="margin: 10rpx 25rpx;">
			<text class="header">城市营业信息</text>
			<text v-if="this.isShowBatchBtn" @click="displaySetting">批量设置</text>
			<checkbox-group @change="allSelectChange" v-if="!this.isShowBatchBtn">
				<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
					<view>
						<checkbox :value="'1'" :checked="isAllChecked" />
					</view>
					<view>全选</view>
				</label>
			</checkbox-group>
		</view>
		<!-- 城市类型 -->
		<tab-bar style="background-color: #FFF;padding-bottom: 10rpx;" :tabList="tabList" :tabIndex.sync="currentIndex"
			@click="tabClick"></tab-bar>

		<swiper class="tab-view" :duration="300" :current.sync="currentIndex" @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view scroll-y="true" style="flex: 1; min-height: 10px;">
					<!-- 列表 -->
					<swiper-page-busInform :tab="tab" :radiovalue1.sync="radiovalue1" :isShowBatchBtn="isShowBatchBtn" ref="tab" @goEdit="goEdit"
						@checkboxChange="checkboxChange" @isAllChecked="isAllCheck"></swiper-page-busInform>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 选择售卖区域 -->
		<view>
			<!-- <u-popup :show="show" @close="close"> -->
			<tui-drawer mode="bottom" :visible="show" @close="close">
				<view class="u-demo-block">
					<text class="u-demo-block__title">请选择营业状态</text>
					<view class="u-page__checkbox-item">
						<!-- <u-radio-group v-model="radiovalue1" placement="column" iconPlacement="right"
							@change="groupChange">
							<u-radio :customStyle="{marginBottom: '20px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group> -->
						<radio-group v-model="radiovalue1" @change="groupChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in radiolist1" :key="index">
								<view>
									<radio :value="item.name" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 确认弹窗组件 -->
				<event-dialog v-if="show2" :message="messageText" @confirm="updateClick" @cancel="close"></event-dialog>
			</tui-drawer>
		</view>
		<!-- 去配置 -->
		<view class="footer" v-if="!this.isShowBatchBtn">
			<view>
				<button  @click="displaySetting" class="left_button_footer" style="color: #000;">取消</button>
			</view>
			<view>
				<button class="bg_color button_footer" @click="requestBusiness(3)">去配置</button>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperPageBusInform from './components/nvue-swiper-page-busInform.vue';
	import eventDialog from './components/eventDialog.vue';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	// import tabBar from '@/components/tab-bar/tab-bar.vue';
	import tabBar from './components/tab-bar.vue';
	import {
		businessQueryBusinessStatusApi,
		queryBusinessOperateCityApi,
		businessModifyBusinessStatusApi
	} from '@/api/businessStatus.js'
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tabBar,
			tuiDrawer,
			eventDialog,
			swiperPageBusInform
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabForm: {
					queryType: 0,
				},
				tableForm: {
					limit: 10,
					page: 1,
				},
				tableData: {
					data: [],
				},
				tabList: [],
				currentIndex: 0, //默认0
				loadMoreStatus: 'noMore',
				checkboxValue: [], // 单选框
				idsData: [],
				show: false,
				radiovalue1: '',
				radiolist1: [{
					name: '正常营业',
					type: '1',
				}, {
					name: '临时歇业',
					type: '2',
				}],
				show2: false,
				groupChangeValue: '',
				messageText: '你确定要执行这个操作吗？',
				radiovalue1: '',
				isAllChecked: false, //全选状态
				isShowBatchBtn:true, //批量设置显示
			}
		},

		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getOperateCity();
			// this.getList();
		},
		methods: {
			//打开下拉
			getId() {
				this.show = true;
			},
			initData() {
				this.$refs.tab[this.currentIndex].initData();
			},
			// 是否批量显示
			displaySetting(){
				this.isShowBatchBtn = !this.isShowBatchBtn;
			},
			//修改总营业状态
			groupChange(n) {
				let radioVale = n.detail.value;
				// let radioVale = n;
				this.groupChangeValue = radioVale;
				if (radioVale == '临时歇业') {
					this.show2 = true
				} else {
					this.show2 = true
				}
			},
			close() {
				this.show = false;
				this.show2 = false;
				// window.location.reload();
				setTimeout(() => {
					this.$refs.tab[this.currentIndex].getCouponList();
				}, 1000)
			},
			updateClick() {
				let modifyBusinessData = {
					ids: this.idsData,
					statusId: '0',
				};
				if (this.groupChangeValue == '正常营业') {
					modifyBusinessData.statusId = '1';
					console.log('点击了确认正常营业事件1')
					businessModifyBusinessStatusApi(modifyBusinessData).then((res) => {
						console.log('点击了确认正常营业事件')
						this.show2 = false;
						this.show = false;
						setTimeout(() => {
							this.$refs.tab[this.currentIndex].getCouponList();
						}, 1000)
					});
					// window.location.reload();

				} else {
					modifyBusinessData.statusId = '0';
					console.log('点击了确认关闭事件1')
					businessModifyBusinessStatusApi(modifyBusinessData).then((res) => {
						console.log('点击了确认关闭事件')
						this.show2 = false;
						this.show = false;
						setTimeout(() => {
							this.$refs.tab[this.currentIndex].getCouponList();
						}, 1000)
					});
					// window.location.reload();

				}
			},
			//获取事业部tab
			getOperateCity() {
				queryBusinessOperateCityApi(this.tabForm).then((res) => {
					var arr1 = [{
						name: "全部",
						useId: "0",
						checkboxValue: []
					}];
					var arr2 = res.data.map(({
						name,
						useId
					}) => ({
						name,
						useId,
						checkboxValue: []
					}));
					this.tabList = arr1.concat(arr2); //返回新数组
				})
			},

			//多选按钮事件
			allSelectChange(checkboxValue) {
				let page = this.$refs.tab[this.currentIndex];
				if (checkboxValue.detail.value.length > 0) {
					page.checkboxAllSelect();
				} else {
					page.checkboxAllSelect(true);
				}
			},
			isAllCheck(value) {
				this.isAllChecked = value;
			},
			//多选
			checkboxChange(checkboxValue) {
				this.tabList[this.currentIndex].checkboxValue = checkboxValue;
				this.updateAllSelectState();
			},
			//更新全选按钮状态
			updateAllSelectState(index) {
				let i = index == null ? this.currentIndex : index;
				if (this.tabList[i].checkboxValue.length > 0) {
					this.allSelect = [1];
				} else {
					this.isAllChecked = false;
					this.allSelect = [];
				}
			},
			tabClick(item) {
				this.currentIndex = item.index;
				this.updateAllSelectState();
			},
			swiperChange(e) {
				let page = this.$refs.tab[this.currentIndex];
				this.updateAllSelectState(e.detail.current);
				page.checkboxAllSelect(true); //清空上次所算的 重要！
			},

			//去配置
			requestBusiness(ele) {
				let requestList = {};
				requestList.type = ele;
				let depotCityData = this.tabList[this.currentIndex].checkboxValue.map((obj) => JSON.parse(obj));
				requestList.depotCityList = depotCityData.map((obj) => ({
					id:obj.id,
					name:obj.name,
				}));
				console.log('depotCityData',depotCityData)
				if(!depotCityData.length){
					return uni.showToast({
						title: '请选择仓库后在进行配置',
						icon: 'none',
						duration: 2000
					});
				}
				this.goPage('/pages/businessInformation/editInformation/editInformation?data=' + JSON.stringify(requestList));
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},

			// getList() {
			// 	businessQueryBusinessStatusApi(this.tableForm).then((res) => {
			// 		this.tableData = res.data;
			// 		this.idsData = res.data.map(obj => obj.id); //id的集合
			// 		const isSameName = res.data.every(obj => obj.businessStatus == '0');
			// 		if (isSameName) {
			// 			this.radiovalue1 = '临时歇业'
			// 		} else {
			// 			this.radiovalue1 = '正常营业'
			// 		} //整体营业状态判断
			// 		//处理时间
			// 		this.tableData.data = res.data.map(function(item) {
			// 			var beginHours = Math.floor(item.businessBeginHoursEveryDay / 60);
			// 			var beginMinutes = item.businessBeginHoursEveryDay % 60;
			// 			if (beginHours < 10) {
			// 				beginHours = "0" + beginHours;
			// 			};
			// 			if (beginMinutes < 10) {
			// 				beginMinutes = "0" + beginMinutes;
			// 			};
			// 			var endHours = Math.floor(item.businessEndHoursEveryDay / 60);
			// 			var endMinutes = item.businessEndHoursEveryDay % 60;
			// 			if (endHours < 10) {
			// 				endHours = "0" + endHours;
			// 			};
			// 			if (endMinutes < 10) {
			// 				endMinutes = "0" + endMinutes;
			// 			};
			// 			return {
			// 				...item,
			// 				businessBeginHoursEveryDay: beginHours + ":" + beginMinutes,
			// 				businessEndHoursEveryDay: endHours + ":" + endMinutes,
			// 			};
			// 		});
			// 	})
			// },
			// tabClick(item) {
			// 	console.log('item', item)
			// 	this.tableForm.cityId = item.useId;
			// 	if (item.useId == 0) {
			// 		delete this.tableForm.cityId
			// 	}
			// 	this.getList();
			// },
			// 去编辑
			// goEdit(item, ele) {
			// 	item.ele = ele;
			// 	this.goPage('/pages/businessInformation/editInformation/editInformation?data=' + JSON.stringify(item));
			// },
			



		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.header {
		font-size: 18px;
		font-weight: bold;
		-webkit-text-stroke-width: 700;
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.title {
		font-size: 16px;
		margin: 20rpx 0;
	}

	.item_top {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		font-weight: bold;
		font-size: 16px;
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.item_content_left {
			flex: 1;
		}

		.item_content_right {
			flex: 2;
		}
	}

	.card_body {
		background-color: #fff;
		padding: 10rpx;
	}

	.card_middle {
		// background-color: #f5f5f5;
		padding: 10px;
	}

	.u-demo-block {
		height: 25vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		height: 60px;
		padding: 0 30rpx;

		view {
			margin-right: 20px;
			flex: 1;
		}

		.left_button_footer {
			border-radius: 22rpx;
			padding: 20rpx 40rpx;
			color: #fff;
			background-color: #f0f0f0;
		}

		.button_footer {
			border-radius: 22rpx;
			padding: 20rpx 40rpx;
			color: #fff;
			@include main_bg_color(theme);
		}
	}
</style>